import { Fragment, defineComponent, reactive } from 'vue';
import { floorContainer, scroll_box, active, layersAndFloor } from './FloorControl.module.scss';
import { map } from '@/store';
import Layers from '../layers/Layers';

/*
---文件
*/
export const floorObj = reactive({
    isShow: true,
})

export default defineComponent({
    name: 'FloorControl',
    data() {
        return {
            floorMany: false,
        };
    },
    methods: {
        changeFloor(level: number) {
            console.log(level);

            if (map.activeFloor !== level) {
                map.fmap.setLevel({
                    level: level,
                });
            }
        },
    },
    render() {
        return <Fragment>
            <div class={layersAndFloor}>
                <Layers />
                <div class={floorContainer} v-if={floorObj.isShow}>
                    <ul class={scroll_box} style={{ maxHeight: `${map.floorInfos.length * 44}px` }}>
                        {
                            map.floorInfos.length > 1 ? map.floorInfos.map((floor: any, index: number) => {
                                return <li key={index} class="flex-center" onClick={() => this.changeFloor(floor.level)}>
                                    <span class={floor.level === map.activeFloor ? active : undefined}>{floor.name}</span>
                                </li>;
                            }) : null
                        }
                    </ul>
                </div>
            </div>
        </Fragment>;
    },
});